@extends('layouts.app')

@section('content')
    <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
    <div class="container">
        <div class="row">
            {{--推荐文章区域--}}
            <div class="col-sm-3">
                <div class="card">
                    <div class="card-header">
                        推荐文章
                    </div>
                    <div class="card-block">
                        <ul class="list-group">

                        </ul>
                    </div>
                </div>
            </div>
            {{--推荐文章区域--}}
            {{--轮播图区域--}}
            <div class="col-sm-6">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Slide 1</div>
                        <div class="swiper-slide">Slide 2</div>
                        <div class="swiper-slide">Slide 3</div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
                <style>
                    .swiper-container {
                        width: 100%;
                        height: 300px;
                    }
                </style>
                <script>
                    var mySwiper = new Swiper('.swiper-container', {
                        loop: true,

                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    })
                </script>
            </div>
            {{--轮播图区域--}}
            {{--热门文章区域--}}
            <div class="col-sm-3">
                <div class="card">
                    <div class="card-header">
                        热门文章
                    </div>
                    <div class="card-block">
                        <ul class="list-group">
                            {{--@article(['click' => 'desc','limit' => 6])--}}
                            {{--<li class="list-group-item">--}}
                                {{--<a href="{{$a['url']}}">{{$a['title']}}</a>--}}
                            {{--</li>--}}
                            {{--@endarticle--}}
                        </ul>
                    </div>
                </div>
            </div>
            {{--热门文章区域--}}
        </div>
    </div>
    <div class="container mt-4">
        <div class="row">
            {{--@category(['pid' => 0])--}}
            {{--<div class="col-sm-6 mt-4">--}}
                {{--<div class="card">--}}
                    {{--<div class="card-header">--}}
                        {{--{{$v['cname']}}--}}
                    {{--</div>--}}
                    {{--<div class="card-block">--}}
                        {{--<ul class="list-group">--}}
                            {{--@article(['cid' => $v['id']])--}}
                            {{--<li class="list-group-item">--}}
                                {{--<a href="###">{{$a['title']}}</a>--}}
                            {{--</li>--}}
                            {{--@endarticle--}}
                        {{--</ul>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
            {{--@endcategory--}}
        </div>
    </div>
@endsection